<template>
  <div class="group_4">
    <!-- 大模块1：空域规划准备 -->
    <div :class="['text-wrapper', { active: selectedModule === 1 }]" @click="toggleModule(1)">
      <span class="text">空域规划准备</span>
    </div>

    <!-- 大模块1的子页面 -->
    <div v-show="selectedModule === 1">
      <div class="sub-page" :class="{ active: currentPage === 'Module1AirspaceNeed' }"
        @click="navigateTo('Module1AirspaceNeed')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module1AirspaceNeed' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>用户使用需求管理</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module1AirspaceRestriction' }"
        @click="navigateTo('Module1AirspaceRestriction')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module1AirspaceRestriction' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>用户使用规范管理</span>
        </div>
      </div>
    </div>

    <!-- 大模块2：空域规划 -->
    <div :class="['text-wrapper', { active: selectedModule === 2 }]" @click="toggleModule(2)">
      <span class="text">空域规划</span>
    </div>

    <!-- 大模块2的子页面 -->
    <div v-show="selectedModule === 2">
      <div class="sub-page" :class="{ active: currentPage === 'Module2PlanningScheme' }"
        @click="navigateTo('Module2PlanningScheme')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module2PlanningScheme' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域规划方案生成</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module3UsageConditions' }"
        @click="navigateTo('Module3UsageConditions')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module3UsageConditions' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域使用批复处理</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module2PlanningRelease' }"
        @click="navigateTo('Module2PlanningRelease')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module2PlanningRelease' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域规划方案发布</span>
        </div>
      </div>
    </div>

    <!-- 大模块3：空域使用条件 -->
    <div :class="['text-wrapper', { active: selectedModule === 3 }]" @click="toggleModule(3)">
      <span class="text">空域运行评估</span>
    </div>

    <!-- 大模块3的子页面 -->
    <div v-show="selectedModule === 3">
      <div class="sub-page" :class="{ active: currentPage === 'Module4SafetyInterval' }"
        @click="navigateTo('Module4SafetyInterval')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module4SafetyInterval' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域运行间隔评估</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module4CapacityAssessment' }"
        @click="navigateTo('Module4CapacityAssessment')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module4CapacityAssessment' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域对象容量评估</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module5FlowAssessment' }"
        @click="navigateTo('Module5FlowAssessment')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module5FlowAssessment' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>态势容流评估</span>
        </div>
      </div>
      <div class="sub-page" :class="{ active: currentPage === 'Module5AlertResults' }"
        @click="navigateTo('Module5AlertResults')">
        <div class="sub-icon">
          <img
            :src="currentPage === 'Module5AlertResults' ? require('@/assets/img/system/siderbar3.png') : require('@/assets/img/system/siderbar4.png')" />
        </div>
        <div class="sub-text">
          <span>空域告警日志</span>
        </div>
      </div>
    </div>

    <!-- 大模块4：运行评估 -->
    <div :class="['text-wrapper', { active: selectedModule === 4 }]" @click="toggleModule(4)">
      <span class="text">空域运行管理</span>
    </div>

    <!-- 大模块4的子页面 -->
    <div v-show="selectedModule === 4">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedModule: null, // 当前选中的大模块
      currentPage: null, // 当前选中的子页面
    };
  },
  methods: {
    toggleModule(moduleNumber) {
      this.selectedModule = this.selectedModule === moduleNumber ? null : moduleNumber;
      if (moduleNumber === 4) {
        this.navigateTo('Module6AirspaceManage');
      }
    },
    navigateTo(page) {
      if (this.$route.name !== page) {
        this.currentPage = page;
        this.$router.push({ name: page });
      }
    }
  },
  mounted() {
    // 初始化时根据当前路由设置页面
    this.currentPage = this.$route.name;
    // 初始化选中对应的模块
    const routeToModuleMap = {
      Module1AirspaceNeed: 1,
      Module1AirspaceRestriction: 1,
      Module2PlanningScheme: 2,
      Module2ApprovalRecord: 2,
      Module3UsageConditions: 3,
      Module4SafetyInterval: 4,
      Module4CapacityAssessment: 4,
    };
    this.selectedModule = routeToModuleMap[this.currentPage];
  }
};
</script>
<style scoped>
/* 整体侧边栏容器样式 */
.group_4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* 将整个group_4左右居中 */
  box-shadow: inset 0px 0px 6px 0px rgba(73, 172, 207, 1);
  background-color: rgba(0, 16, 29, 0.5);
  border-radius: 8px;
}

/* 大模块样式 */
.text-wrapper {
  /* height: 10vh; */
  height: 10%;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/img/system/siderbar2.png") center no-repeat;
  background-size: contain;
  cursor: pointer;
  margin: 1% 0;
  /* 为大模块增加上下间隔 */
}

.text-wrapper.active {
  background: url("@/assets/img/system/siderbar1.png") center no-repeat;
  background-size: contain;
}

.text {
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  text-align: center;
}

/* 子页面样式 */
.sub-page {
  display: flex;
  align-items: center;
  width: 100%;
  height: 5vh;
  margin: 4% 0;
  /* 为子页面增加上下空隔 */
  cursor: pointer;
  background-color: rgba(33, 136, 255, 0.23);
}

.sub-page.active {
  background-color: rgba(33, 136, 255, 0.5);
}

.sub-icon {
  width: 43px;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-text {
  margin-left: 5px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 1);
  font-family: AlibabaPuHuiTi_2_65_Medium;
}
</style>
